<template>
  <div>
    <el-row style="display: flex; justify-content: center;">
      <img :src="require('../../assets/yyt/img-01.jpg')" />
    </el-row>

    <el-row style="display: flex; justify-content: center; margin-top:20px;">
      <el-steps :active="2" finish-status="success" simple style="width: 50%;">
        <el-step title="1.填写号码、金额"></el-step>
        <el-step title="2.确认并支付"></el-step>
        <el-step title="3.完成"></el-step>
      </el-steps>
    </el-row>
    <el-row style="display: flex; justify-content: center;">
      <div>
        <!-- 浅绿色背景框 -->
        <el-card
          class="order-card"
          style="background-color: #f0f9eb;width:65%;margin-left:100px;margin-top: 20px;"
        >
          <!-- 提示信息 -->
          <div class="order-info">
            <div style="color: green;">
              订单已于
              <span style="color: red;">{{ formattedCreateTime }}</span> 提交成功，请您尽快支付！
            </div>

            <div class="order-details" style="margin-top: 20px;">
              订单号: {{ orderNum }} &nbsp;&nbsp;|&nbsp;&nbsp; 应付金额:&nbsp;
              <div style="color: red; display: inline;">￥{{ totalPrice }}</div>元
            </div>
          </div>

          <!-- 支付提示 -->
          <div style="margin-top: 20px;">
            请您在提交订单后
            <span style="color: orange;">15分钟</span>内完成支付,否则订单会自动取消。
          </div>
          <el-row style="margin-top: 40px;">
            <el-col :span="3">支付方式: &nbsp;&nbsp;</el-col>
            <el-col :span="1">
              <el-radio v-model="radio" label="1">
                <label style="display: none;"></label>
              </el-radio>
            </el-col>
            <el-col :span="4">
              <span class="radio-content">
                <img :src="require('../../assets/yyt/alipay.jpg')" />
              </span>
            </el-col>
          </el-row>
        </el-card>
        <el-row style="margin-left: 900px;margin-top:20px">
          <el-button type="primary" @click="opendialog">确认支付</el-button>
        </el-row>
      </div>
      <div>
        <el-dialog :visible.sync="dialogVisible" height="1000px" width="1100px">
          <iframe id="alipayFrame" style="width: 1000px;height:1000px"></iframe>
        </el-dialog>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderNum: "",
      totalPrice: "",
      order: {},
      radio: "",
      dialogVisible: false,
      isDataLoaded: false, // 是否已经加载完数据
    };
  },
  methods: {
    queryOrder() {
      this.$axios
        .get("api/productOrder/queryOrderByOrderNum?orderNum=" + this.orderNum)
        .then(res => {
          if (res.data.code == 200) {
            this.order = res.data.data;
            this.isDataLoaded = true; // 数据加载完成
          }
        });
    },
    opendialog(){
      this.pay();
      this.dialogVisible = true;
    },
    pay() {
      if (!this.radio) {
        this.$message.error("请选择支付方式");
        return;
      }
      // 开启遮罩
      this.loading = true;
      this.$axios
        .post("/api/staffOrder/alipay/getPayHtml?orderNum=" + this.orderNum)
        .then(response => {
          // iframe形式
          const iframe = document.getElementById("alipayFrame");
          if (!iframe) {
            return;
          }
          iframe.srcdoc = response.data;
        })
        
    }
  },
  created() {
    this.orderNum = this.$route.query.orderNum;
    this.queryOrder();
    this.totalPrice = this.$route.query.totalPrice;
    
  },
  computed: {
    formattedCreateTime() {
      if (!this.order.createTime) {
        return "";
      }
      const date = new Date(this.order.createTime);
      date.setHours(date.getHours()); // 手动添加8小时
      return new Intl.DateTimeFormat("zh-CN", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
        hour12: false
      })
        .format(date)
        .replace(/\//g, "-");
    }
  }
};
</script>

<style scoped>
.order-card {
  padding: 20px;
}

.order-details {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.radio-content {
  display: flex;
  align-items: center;
}

.payment-img {
  position: absolute;
  top: -5px;
  /* 调整图片的垂直位置 */
  left: 0;
}

.mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;
}
</style>